<template>
  <div class="av_con">
    <div class="avc_">
      <div class="avc_title">出现动画：</div>
      <div class="avc_item">
        <a-select
          :value="showInfo.fadeIn"
          style="width: 100%"
          @change="optionChange('fadeIn', $event)"
        >
          <a-select-option
            v-for="(item, index) in showInfo.fadeInList"
            :key="index"
            :value="item"
            v-text="item"
          ></a-select-option>
        </a-select>
      </div>
      <div class="avc_title">消失动画：</div>
      <div class="avc_item">
        <a-select
          :value="showInfo.fadeOut"
          style="width: 100%"
          @change="optionChange('fadeOut', $event)"
        >
          <a-select-option
            v-for="(item, index) in showInfo.fadeOutList"
            :key="index"
            :value="item"
            v-text="item"
          ></a-select-option>
        </a-select>
      </div>
      <!-- <div class="avc_btn">
        <a-button>
          <template #icon><BugOutlined /></template> 执行
        </a-button>
      </div> -->
    </div>
    <div class="avc_">
      <a-button @click="show(true)">
        <template #icon><EyeOutlined /></template> 出现
      </a-button>
      <a-button style="margin-left: 20px" @click="show(false)">
        <template #icon><EyeInvisibleOutlined /></template> 隐藏
      </a-button>
    </div>
    <transition
      :duration="showInfo.useTime"
      :enter-active-class="'animate__animated ' + showInfo.fadeIn"
      :leave-active-class="'animate__animated ' + showInfo.fadeOut"
    >
      <div v-if="showInfo.showFlag" class="avc_view">操作元素</div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

const showInfo = reactive<Record<string, any>>({
  fadeIn: "",
  fadeOut: "",
  fadeInList: [],
  fadeOutList: [],
  showFlag: true,
  useTime: 2000,
});

showInfo.fadeInList = [
  "animate__backInDown",
  "animate__backInLeft",
  "animate__backInRight",
  "animate__backInUp",
  "animate__bounceIn",
  "animate__bounceInDown",
  "animate__bounceInLeft",
  "animate__fadeInTopLeft",
  "animate__flipInX",
  "animate__jackInTheBox",
];
showInfo.fadeOutList = [
  "animate__backOutDown",
  "animate__backOutLeft",
  "animate__backOutRight",
  "animate__backOutUp",
  "animate__bounceOut",
  "animate__bounceOutDown",
  "animate__bounceOutLeft",
  "animate__fadeOutBottomRight",
  "animate__flipOutX",
  "animate__hinge",
];

const optionChange = (type: string, e: Event) => {
  showInfo[type] = e;
};

const show = (flag: boolean) => {
  showInfo.showFlag = flag;
};
</script>

<style scoped lang="scss">
.av_con {
  padding: 40px;
  width: 100%;
  .avc_ {
    width: 100%;
    display: flex;
    height: 32px;
    align-items: center;
    margin-bottom: 20px;
    .avc_title {
      font-size: 14px;
      margin-right: 10px;
    }
    .avc_item {
      width: 200px;
      margin-right: 20px;
    }
  }
  .avc_view {
    width: 200px;
    height: 100px;
    background-color: #5698c3;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    border-radius: 10px;
  }
}
</style>
